<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行情提示</title>
		<script src="../static/js/base.js"></script>
	</head>
	<style type="text/css">
		.top{
		    padding: 0px 15px;
    		box-sizing: border-box;
		    height: 50px;
		    line-height: 50px;
		    background-color: #424242;
		    text-align: center;
		}
		.left_arrow{
            width: 23px;
            height: 25px;
            top: 13px;
            left: 15px;
            background-size: 50%;
            position: absolute;
            background-image: url(../static/img/arrow_left.png);
            z-index: 100;
        }
		.section_1st{
			padding: 30px 15px 25px;
			box-sizing: border-box;
			background-color: #393939;
		}
		.set_item{
			padding: 20px 15px;
			box-sizing: border-box;
			margin-top: 2px;
			background-color: #424242;
		}
		.account_item{
		    margin-left: 60px;
		}
		.account_item2{
			    margin-left: 16px;
		}
		.account_item input{
            box-sizing: border-box;
            /*width: 100%;*/
            text-align: left;
            font-size: 14px;
            background: transparent;
            color: #efefef;
		}
		.account_item2 input{
            box-sizing: border-box;
            /*width: 100%;*/
            text-align: left;
            font-size: 14px;
            background: transparent;
            color: #efefef;
		}
		.form_switch_wrap {
		    box-sizing: border-box;
		    color: #222;
		    text-align: right;
		    float: right;
		    /*width: 65%;*/
		    height: 48px;
		}
		.last_div{
			padding: 0px 15px;
			box-sizing: border-box;
		}
		/***** checkbox样式 ***/
		.myswitch{
		     -webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		    position: relative;
		    width: 40px;
		    height: 20px;
		    border: 1px solid #DFDFDF;
		    outline: 0;
		    border-radius: 10px;
		    box-sizing: border-box;
		    background: #DFDFDF;
		}
		 .myswitch:before{
		    content: " ";
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 38px;
		    height: 18px;
		    border-radius: 9px;
		    background-color: #FDFDFD;
		    -webkit-transition: -webkit-transform .3s;
		    transition: -webkit-transform .3s;
		    transition: transform .3s;
		    transition: transform .3s, -webkit-transform .3s;
		}
		 .myswitch:after {
		    content: " ";
		    position: absolute;
		    top: 0;
		    left: 0;
		    width:18px;
		    height: 18px;
		    border-radius: 9px;
		    background-color: #CCCCCC;
		    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
		    -webkit-transition: -webkit-transform .3s;
		    transition: -webkit-transform .3s;
		    transition: transform .3s;
		    transition: transform .3s, -webkit-transform .3s;
		}
		.myswitch:checked{
		    border-color: #e1b080;
		    background-color: #e1b080;
		}
		.myswitch:checked:before{
		   -webkit-transform: scale(0);
		    transform: scale(0);
		}
		.myswitch:checked:after {
		    -webkit-transform: translateX(20px);
		    transform: translateX(20px);
		}
	.dianji{
        width: 110px;
        height: 25px;
        border-radius: 5px;
        box-shadow: 0 0 5px #ccc;
        position: relative;
		text-align: center;
        
    }
    select{
        border: none;
        outline: none;
        width: 100%;
        height: 25px;
        line-height: 28px;
        appearance: none;
        text-align: center;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 5px;
        background-color: #c8c8c8;

    }
    .dianji:after{
        content: "";
        width: 20px;
        height: 12px;
        background: url(../static/img/xialaicon@2x.png) no-repeat center;
        position: absolute;
        right: 5px;
        top: 30%;
        pointer-events: none;
    }
    
		/***** checkbox样式 ***/
	</style>
	<body ms-controller="wm">
		<div class="top"><span class="left_arrow bgBox" ms-click="gohistory"></span>价格预警<span class="fr" ms-click="gohistory">完成</span></div>
		<div class="section_1st">
			<div class="f30 color_ef">小恒指</div>
			<div class="f15 color999 mt15">小恒指<span class="colorred ml10" style="margin-right: 40px;">31444</span>涨跌幅<span class="colorred ml10">+0.82%</span></div>
		</div>
		<div class="set_item">
			<span>行情涨到</span>
			<span class="account_item">
				<input type="number" placeholder="输入价格" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
		<div class="set_item">
			<span>行情跌到</span>
			<span class="account_item">
				<input type="number" placeholder="输入价格" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
		<div class="set_item">
			<span>日涨幅超过&nbsp;(%)</span>
			<span class="account_item2">
				<input type="number" placeholder="输入涨幅" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
		<div class="set_item">
			<span>日涨幅超过&nbsp;(%)</span>
			<span class="account_item2">
				<input type="number" placeholder="输入跌幅" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
		<div class="set_item">提醒频次
			<span class="fr color999 dianji">
				<select>
					<option value="仅提醒一次">仅提醒一次</option>
					<option value="每日提醒">每日提醒</option>
				</select>
			</span>
		</div>
		<div class="mt15 f10 color999 last_div">交易品种多次按照设置方向达到目标点位或目标涨跌幅，仅每个交易日第一次提醒</div>
	</body>
	<script type="text/javascript">
		var o;
		avalon.ready(function(){
			o = avalon.define({
				$id:"wm",
				gohistory:function(){
					location.href = "../products/product_detail.html"
				}
			});
			avalon.scan(document.body);
		})
	</script>
</html>
